<template>
  <yd-layout class="category">
    <!-- header -->
    <v-header></v-header>
    <!-- content -->
    <div class="content" fixed>
      <div class="space-20">
      </div>
      <div>
        <yd-scrolltab>
          <div v-for="item in items">
            <yd-scrolltab-panel :label="item.name" icon="demo-icons-category1" active>
              <div>
                <yd-grids-group :rows="3">
                  <yd-grids-item v-for="item in item.children" style="background-color:#f2f2f2">
                    <span slot="text">{{item.name}}</span>
                  </yd-grids-item>
                </yd-grids-group>
              </div>
            </yd-scrolltab-panel>
          </div>
        </yd-scrolltab>
      </div>
    </div>
    <!-- footer -->
    <v-footer></v-footer>

  </yd-layout>
</template>

<script>
  import baseService from '../axios/'

  export default {
    name: 'category',
    data() {
      return {
        msg: '分类',
        items: []
      }
    },
    computed: {
      pageId () {
	      return this.$store.store.state.pageId
      }
    },
    created() {
      this.getDeepCategory()
      let id = "category"; 
      this.setpageId (id);
    },
    methods: {
      setpageId (id) {
        this.$store.store.commit('setpageId',id)
      },
      getDeepCategory() {
        let param = new URLSearchParams();
        param.append("categoryId", 1);
        baseService.post('/product/getCategory.do', param).then((res) => {
          if (res.data.status == 0) {
            let myData = res.data.data;
            // console.log(myData);
            let length = myData.length;
            // console.log(`一级分类长度= ${length} `);
            for (let i = 0; i < length; i++) {
              myData[i].children = '';
              this.items = res.data.data;
              console.log(this.items[i]);
              let categoryid = myData[i].id;
              // console.log(`一级分类的对应名称= ${myData[i].name} `);

              let newParam = new URLSearchParams();
              newParam.append("categoryId", categoryid);
              baseService.post('/product/getCategory.do', newParam).then((res) => {
                if (res.data.status == 0) {
                  let newData = res.data.data;
                  let newLength = newData.length;
                  // console.log(newData);
                  // console.log(`二级分类长度= ${newLength} `);
                  // for (let j = 0; j < newLength; j++) {
                    this.items[i].children = newData;
                    // console.log(this.items[i].children);
                  // }
                }
              })
              
            }
          }
        })
      }
    }
  }

</script>

<style>
  .content {
    margin-top: 13%;
    width: 100%;
    height: 85%;
    position: fixed;
  }

</style>
